import React,{Component} from 'react'
import TotalStatistic from 'components/total-statistic'
import RatioDisplayEchart from 'components/ratio-display-echart'
import FlowMonitorEchart from 'components/flow-monitor-echart'
import RankDisplayEchart from 'components/rank-display-echart'
import {inject, observer} from 'mobx-react'
import './index.less'
/**
 * 名称：营销监控页面
 * 描述：监控营销状况
 * 调用：营销效果中心
 * 输入：marketingStore 营销效果数据存储
 * 时间：20220404
 */
 @inject('marketingStore')
 @observer
class MarketingMonitor extends Component{
    constructor(props){
        super(props)
        const {marketingStore} = props
        
        marketingStore.apiCountData(1)
        marketingStore.apiTagRatioData()
        marketingStore.apiactivityFlowData(1)
        marketingStore.apiActivityRankData()
        marketingStore.apiTagRankData()
        // marketingStore.setShowIndex(0)
        
    }

    /**
     * 截取数组中的制定长度的数据
     * @param {*} arrayData 数组
     * @param {*} index 从哪开始
     * @param {*} num 截取长度
     * @returns 
     */
    getSpecialNumData = (arrayData,index,num) =>{
        let result = []
        let len = arrayData.length
        for (let i=0;i<num;i++){
            result = [...result,arrayData[(index+i)%len]]
        }
        return result
    }
    componentDidMount(){
        
        this.timer = setInterval((function(){
            let {marketingStore} = this.props
            let {showIndex} = marketingStore
            let index = showIndex + 1
            marketingStore.setShowIndex(index)
            marketingStore.apiTagRatioData()
            marketingStore.apiCountData()
            marketingStore.apiactivityFlowData()
            marketingStore.apiActivityRankData()
            marketingStore.apiTagRankData()
            
        }).bind(this),10000)
    }
    componentWillUnmount(){
        console.log("unmont timer")
        if (this.timer != null) {
            clearInterval(this.timer);
        }
    }
    render(){
        const {marketingStore} = this.props
        const {showIndex} = marketingStore
        const activityFlowData = marketingStore.getActivityFlowData()
        const activityRankData = marketingStore.getActivityRankData()
        const tagRankData = marketingStore.getTagRankData()
        const tagRatioData = marketingStore.getTagRatioData()
        const countData = marketingStore.getCountData()
        
        let activityThreeData = this.getSpecialNumData(activityFlowData,showIndex,3)
        let activityRankFiveData = this.getSpecialNumData(activityRankData,showIndex,5)
        let tagRankFiveData = this.getSpecialNumData(tagRankData,showIndex,5)
        let tagThreeRatioData = this.getSpecialNumData(tagRatioData,showIndex,6)
        const statisticStore = {countData}
        const tagRatioStore = {tagRatioData: tagThreeRatioData}
        const rankStore = {
            tagRankData:tagRankFiveData,
            activityRankData:activityRankFiveData}
        const flowStore = {activityData:activityThreeData}
        
        return (
            <div className='marketing'>
                <div className='statistic'>
                    <TotalStatistic store={statisticStore}/>
                </div>
                <div className='ratio'>
                    <RatioDisplayEchart store={tagRatioStore}/>
                </div>
                <div className='rank'>
                    <RankDisplayEchart store={rankStore}/>
                </div>
                <div className='flow' >
                    <FlowMonitorEchart store={flowStore}/>
                </div>
            </div>
        )
    }

}
export default MarketingMonitor